<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <ul>
          <li @click="router.push('/')">首页</li>
          <li @click="router.push('/farmland/soil')">土壤数据</li>
          <li @click="router.push('/weather')">气象数据</li>
          <li @click="router.push('/farmland/pest')">病虫害数据</li>
          <li @click="router.push('/chartView')">表格统计</li>
        </ul>
      </el-aside>
      <el-container>
        <el-header>AgriVista智农云视野</el-header>
        <el-main>
          <routerView></routerView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import router from '@/router';
import { onMounted } from 'vue';

onMounted:{
  
}
</script>

<style lang="css" scoped>
  .el-aside {
    background-color: #001529;
    color: white;
    height: 1000px;
  }
  .el-aside ul{
    list-style: none;
    padding: 0;
  }
  .el-aside ul li {
    padding: 20px 0;
    font-size: 18px;
  }
  .el-aside ul li:hover{
    background-color: #f3f5f7;
    color: black;
  }
  .el-header {
    /* background-color: black; */
    border: 1px solid #e2e4e4;
  }
</style>